<template>
    <div class="logistics">
        <SearchBox placeHolder="关键字查询"></SearchBox>
        <van-tabs v-model="active" animated swipeable>
            <van-tab v-for="(item, index) in categiryList" :key="index" :title="item.categiryName">
                <div class="content" :ref="'content' + index" @scroll="showMore(index, 'content' + index)">
                    <van-empty
                        class="custom-image"
                        :image="require('../../assets/images/logistics/no_news.png')"
                        description="暂无内容哦"
                        v-show="item.ifEmpty"
                    />
                    <NewGoodsCard v-for="(items, indexs) in item.list" :key="indexs" :goodsInfo="item">
                        <template v-slot:header>
                            <van-cell :title="items.cusName" is-link />
                        </template>
                        <template v-slot:center>
                            <div class="txt-info">
                                <div>{{ items.title }}</div>
                                <div><span>下单时间</span>{{ items.orderTime }}</div>
                                <div><span>下单人</span>{{ items.orderUserName }}</div>
                            </div>
                        </template>
                        <template v-slot:btn>
                            <van-button
                                type="primary"
                                class="sent"
                                @click="toOderPage(items.serialNo)"
                                v-if="items.status === 0"
                                >发货</van-button
                            >
                            <van-button
                                type="primary"
                                class="get"
                                @click="showPopup(items.serialNo)"
                                v-if="items.status === 10"
                                >收货</van-button
                            >
                            <van-button
                                type="primary"
                                class="evaluate"
                                @click="
                                    $router.push({
                                        path: '/evaluation',
                                        query: {
                                            status: 'write',
                                            serialNo: items.serialNo,
                                        },
                                    })
                                "
                                v-if="items.status === 20"
                                >评价</van-button
                            >
                            <van-button
                                type="primary"
                                class="watch-evaluate"
                                @click="
                                    $router.push({
                                        path: '/evaluation',
                                        query: {
                                            serialNo: items.serialNo,
                                        },
                                    })
                                "
                                v-if="items.status === 30"
                                >查看评价</van-button
                            >
                        </template>
                    </NewGoodsCard>
                </div>
            </van-tab>
        </van-tabs>
        <van-popup v-model="show" get-container="#app">
            <div class="tips">是否确认收货?</div>
            <div class="button-box">
                <div class="l" @click.stop="show = false">取消</div>
                <div class="r" @click.stop="confirmOder">确认收货</div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import NewGoodsCard from '@/components/NewGoodsCard';
import SearchBox from '@/components/SearchTemp';
import { AllOderApi, ShipOderApi, GetOderApi, EvaluationOderApi, ConfirmOderApi } from '@/request/api';
export default {
    data() {
        return {
            value: '',
            active: 0,
            show: false,
            categiryList: [
                {
                    categiryName: '全部',
                    list: [],
                    currentPage: 1,
                    totalPage: null,
                    ifEmpty: false,
                },
                {
                    categiryName: '待发货',
                    list: [],
                    currentPage: 1,
                    totalPage: null,
                    ifEmpty: false,
                },
                {
                    categiryName: '待收货',
                    list: [],
                    currentPage: 1,
                    totalPage: null,
                    ifEmpty: false,
                },
                {
                    categiryName: '待评价',
                    list: [],
                    currentPage: 1,
                    totalPage: null,
                    ifEmpty: false,
                },
            ],
            serialNo: null,
        };
    },
    methods: {
        allOderFn(index, obj, callbackFn) {
            let params = {};
            if (Object.keys(obj).length != 0) {
                params = obj;
            } else {
                params = {
                    current: '1',
                    size: '10',
                };
            }
            switch (index) {
                case 0:
                    AllOderApi(params).then((res) => {
                        callbackFn(res);
                    });
                    break;
                case 1:
                    ShipOderApi(params).then((res) => {
                        callbackFn(res);
                    });
                    break;
                case 2:
                    GetOderApi(params).then((res) => {
                        callbackFn(res);
                    });
                    break;
                case 3:
                    EvaluationOderApi(params).then((res) => {
                        callbackFn(res);
                    });
                    break;
                default:
                    break;
            }
        },
        showMore(index, contentName) {
            if (
                this.$refs[contentName][0].scrollTop >=
                    this.$refs[contentName][0].scrollHeight - this.$refs[contentName][0].offsetHeight - 1 &&
                this.categiryList[index].totalPage > this.categiryList[index].currentPage
            ) {
                this.allOderFn(
                    index,
                    {
                        current: (++this.categiryList[index].currentPage).toString(),
                        size: '10',
                    },
                    (res) => {
                        res.data.records.forEach((el) => {
                            this.categiryList[index].list.push(el);
                        });
                    }
                );
            }
        },
        getListData() {
            this.categiryList.forEach((el, i) => {
                el.currentPage = 1;
                this.allOderFn(i, {}, (res) => {
                    el.list =
                        el.categiryName === '待评价'
                            ? res.data.records.filter((el) => {
                                  return el.status === 20;
                              })
                            : res.data.records;
                    el.totalPage = res.data.pages;
                    el.ifEmpty = !el.list.length;
                });
            });
        },
        showPopup(serialNo) {
            this.show = true;
            this.serialNo = serialNo;
        },
        toOderPage(serialNo) {
            this.$router.push({
                path: '/shippingorderinfo',
                query: {
                    serialNo,
                },
            });
        },
        confirmOder() {
            ConfirmOderApi({
                serialNo: this.serialNo,
            }).then(() => {
                this.show = false;
                this.getListData();
            });
        },
    },
    created() {
        this.active = sessionStorage.activeVal | 0;
        this.getListData();
    },
    activated() {
        if (this.$route.meta.refresh) {
            this.$route.meta.refresh = false;
            this.getListData();
        }
    },
    watch: {
        active(newVal) {
            sessionStorage.setItem('activeVal', newVal);
        },
    },
    components: {
        SearchBox,
        NewGoodsCard,
    },
};
</script>

<style lang="less" scoped>
.logistics {
    background-color: #efefef;
}
.custom-image {
    margin-top: 2rem;
    .van-empty__image {
        width: 0.9rem;
        height: 0.9rem;
    }
}
.van-tabs {
    /deep/.van-tabs__wrap {
        border-top: 0.01rem solid #e5e5e5;
        border-bottom: 0.01rem solid #e5e5e5;
        height: 0.9rem;
        box-sizing: border-box;
        margin-bottom: 0.1rem;
    }
    /deep/.van-tab {
        position: relative;
        &:not(:last-of-type)::after {
            content: '';
            position: absolute;
            right: 0;
            width: 0.01rem;
            height: 0.4rem;
            background-color: #e5e5e5;
        }
    }
    /deep/.van-tab.van-tab--active {
        color: #003399;
    }
    /deep/.van-tabs__line {
        width: 1.05rem;
        height: 0.04rem;
        background-color: #ffcc33;
    }
    .content {
        width: 100%;
        height: calc(100vh - 2.74rem);
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
    }
}
.van-popup--center {
    width: 5.2rem;
    height: 2.5rem;
    border-radius: 0.2rem;
    display: flex;
    flex-direction: column;
    color: #333;
    .tips {
        flex: 1;
        font-size: 0.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .button-box {
        border-top: 0.01rem solid #e5e5e5;
        height: 0.87rem;
        display: flex;
        position: relative;
        .l,
        .r {
            flex: 1;
            text-align: center;
            line-height: 0.87rem;
        }
        .l {
            color: #666;
        }
        .r {
            color: #4287ff;
        }
        &::after {
            content: '';
            position: absolute;
            height: 100%;
            width: 0.01rem;
            background-color: #e5e5e5;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}
</style>
